<template>
    <div>
        <commpVxeTable
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            >
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item>
                        <a-button v-if="row.fjfzt == '待缴费'" class="blue-btn" @click="showModal(row)">缴费</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <a-modal
            title="缴费"
            :visible="jfVisible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <a-form :form="cform" ref="form" class="partyFeeManagement-modal-form" >
                <a-form-item label="实缴金额">
                    <a-input-number v-model="fsjje"
                        v-decorator="['fsjje', {initialValue:fsjje,rules: rules.fsjje}]"
                        :min="1"
                        style="width:100%;"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {confirmPayment} from './service/index'
export default {
    components: {
      commpVxeTable
    },
    props:{
        linkName:{
            type:String,
            default:'',
            required:false,
        },
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: assessCheckApi.queryMyDfjlPageList,
          rowId: 'id',
          paramet:{}
        },
        formItem: [
            {
            label: '缴费人员',
            model: 'fjfry',
            },{
            label: '缴费状态',
            model: 'fjfzt',
            type:'Select',
            options:[{
                label: '待缴费',
                value: '待缴费'
            },{
                label: '待确认',
                value: '待确认'
            },{
                label: '已缴费',
                value: '已缴费'
            }]
            },{
            label: '缴费方式',
            model: 'fjffs',
            type:'Select',
            options:[{
                label: '线上',
                value: '线上'
            },{
                label: '线下',
                value: '线下'
            }]
            },
        ],
        columnsVxe: [
            {
            type: 'checkbox',
            width: 60,
            fixed: 'left'
            },{
            title: '缴费人员',
            field: 'fjfry',
            },{
            title: '缴费状态',
            field: 'fjfzt',
            },{
            title: '应缴金额',
            field: 'fyjje',
            },{
            title: '应缴时间',
            field: 'fyjsj',
            },{
            title: '实缴金额',
            field: 'fsjje',
            },{
            title: '缴费时间',
            field: 'fjfsj',
            },{
            title: '缴费方式',
            field: 'fjffs',
            },{
            title: '操作',
            field: 'jobid',
            slots: {
            // 使用插槽模板渲染
                default: 'operation_btn',
            },
            }
        ],
        jobidList: [],
        passObj: {},
        jfVisible: false,
        confirmLoading: false,
        cform:this.$form.createForm(this, { name: 'cform' }),
        fsjje: null,
        jfId: '',
        rules:{
            fsjje: [{ required: true,type: 'number', message: '请填写实缴金额', trigger: 'blur',}],
        }
      }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.jobidList = []
            if(val.length){
            val.forEach(item => {
                this.jobidList.push(item.jobid)
            });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        showModal(row) {
            this.jfId = ''
            this.jfId = row.id
            this.jfVisible = true;
        },
        handleOk(e) {
            this.cform.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true;
                    let data = {
                        fsjje: this.fsjje,
                        id: this.jfId
                    }
                    confirmPayment(data).then(res => {
                        if(res.code == 200){
                            this.confirmLoading = false;
                            this.$message.success(res.message)
                            this.reCommpVxeTable = Date.now()
                            this.jfVisible = false
                        } else (
                            this.$message.warning(res.message)
                        )
                    })
                }
            })
        },
        handleCancel(e) {
            this.jfVisible = false;
        },
        cancel(){},
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.resetEvent()
            this.jobidList = []
        }
    },
}
</script>
<style lang="less" scoped>
.partyFeeManagement-modal-form{
    .ant-form-item{
        display: flex;
    }
    .ant-form-item-label{
        width: 100px;
    }
    .ant-form-item-control-wrapper{
        width: 260px;
    }
    .ant-calendar-picker{
        width: 260px;
    }
}
</style>
